import React,{ Fragment}  from 'react';
import { Table,Button,Select } from 'antd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { createFromIconfontCN } from '@ant-design/icons';
import "./index.css"
// 自定义 font 图标
const MyIcon = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_3605787_gq8b2jy6drr.js', // 在 iconfont.cn 上生成
});
interface DataType {
  key: React.Key;
  name: string;
  chinese: number;
  math: number;
  english: number;
}

const columns: ColumnsType<DataType> = [
  {
    title: '序号',
    dataIndex: 'name',
  },
  {
    title: 'ID',
    dataIndex: 'chinese',
    sorter: (a, b) => a.name.length - b.name.length,
    sortDirections: ['descend'],
  },
  {
    title: '成交金额',
    dataIndex: 'math',
    sorter: {
      compare: (a, b) => a.math - b.math,
      multiple: 2,
    },
  },
  {
    title: '成交时间',
    dataIndex: 'english',
    sorter: {
      compare: (a, b) => a.english - b.english,
      multiple: 1,
    },
  },
  {
    title: '状态',
    dataIndex: 'english',
    sorter: {
      compare: (a, b) => a.english - b.english,
      multiple: 1,
    },
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    chinese: 98,
    math: 60,
    english: 70,
  },
  {
    key: '2',
    name: 'Jim Green',
    chinese: 98,
    math: 66,
    english: 89,
  },
  {
    key: '3',
    name: 'Joe Black',
    chinese: 98,
    math: 90,
    english: 70,
  },
  {
    key: '4',
    name: 'Jim Red',
    chinese: 88,
    math: 99,
    english: 89,
  },
];

const onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {
  console.log('params', pagination, filters, sorter, extra);
};
// select选择器
const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
const Amount = () => {
    return(
        <Fragment>
          <div className="money">
            <div className="m1">
              <div className="m11">
                <div className='r'>
                  <MyIcon type="icon-tuikuanguanli"/>
                </div>
                <div className="m12">
                  <div className='txt1'>1.2234.3456.00</div>
                  <div className='txt2'>总成交金额（元）</div>
                </div>
              </div>
              <div className="m11">
                <div className='r r1'>
                  <MyIcon type="icon-purse1Y"/>
                </div>
                <div className="m12">
                  <div className='txt1'>5656.00</div>
                  <div className='txt2'>当天成交额（元）</div>
                </div>
              </div>
            </div>
            <div className="m2">
              <div className='m33'>
                最新统计时间：2019-08-12
              </div>
              <Button> 查看月报表</Button>
            </div>
          </div>
             <div className="button">
                <Button type="primary">全部订单</Button>
                <Button type="primary">当天订单</Button>
                <Button type="primary">当月订单</Button>
            </div>
        <div className="table">
        <div className="table_top">
                    <div>
                        每页显示&nbsp;&nbsp;
                        <Select
                            defaultValue="lucy"
                            style={{ width: 120 }}
                            onChange={handleChange}
                            options={[
                                {
                                value: 'jack',
                                label: 'Jack',
                                },
                                {
                                value: 'lucy',
                                label: 'Lucy',
                                },
                                {
                                value: 'disabled',
                                disabled: true,
                                label: 'Disabled',
                                },
                                {
                                value: 'Yiminghe',
                                label: 'yiminghe',
                                },
                            ]}
                        />
                    </div>
                </div>
            <Table 
            columns={columns} 
            dataSource={data} 
            onChange={onChange}
            bordered
             />
        </div>
        </Fragment>
    )
};

export default Amount;
